<template>
    <div>
        <div class="userxingxibox">
            <div class="imgbox">
                <img :src="userObj.headerimg" alt="头像">
                <el-button type="info" size="small" round @click="gerengxingxixiugai = true">账号设置</el-button>
            </div>
            <div class="islistbox">
                <p>昵称：{{ userObj.nick }}</p>
                <p>账号：<span>{{ userObj.username }}</span></p>
                <p class="ltext">注册时间：<span>{{ userObj.RegistrationTime }}</span></p>
                <p class="ltext">所在地址：<span>{{ userObj.address }}</span></p>
                <p class="ltext">ID：<span>{{ userObj._id }}</span></p>
            </div>
        </div>
    </div>
    <el-dialog v-model="gerengxingxixiugai" width="440px" :before-close="Cancelmodification">
        <div class="usercard">
            <h2>修改个人信息</h2>
            <div class="headerimgbox">
                <img :src="headerimgref" alt="头像"><input type="file" name="headerimg" :onchange="getimgsrc">
            </div>
            <form>
                <h4>账户ID：{{ userObj._id }}</h4>
                <div class="listbox">
                    <label>昵&emsp;&emsp;称：</label>
                    <input v-model="userObj.nick" placeholder="昵称" />
                </div>
                <div class="listbox">
                    <label>性&emsp;&emsp;别：</label>
                    <el-radio-group v-model="userObj.gender" style="width:205px;">
                        <el-radio label="男" size="large" style="width:50px;">女</el-radio>
                        <el-radio label="女" size="large" style="width:50px;">男</el-radio>
                        <el-radio label="保密" size="large" style="width:50px;">保密</el-radio>
                    </el-radio-group>
                </div>
                <div class="listbox">
                    <label>联系电话：</label>
                    <input v-model="userObj.telephone" type="telephone" placeholder="联系电话" />
                </div>
                <div class="listbox">
                    <label>邮&emsp;&emsp;箱：</label>
                    <input v-model="userObj.mail" type="mail" placeholder="邮箱" />
                </div>
                <div class="listbox">
                    <label>地&emsp;&emsp;址：</label>
                    <input v-model="userObj.address" type="mail" placeholder="例如：中国-北京-朝阳区" />
                </div>
                <div class="form_item">
                    <el-button @click="btnlogin()">确认修改</el-button>
                    <el-button @click="Cancelmodification()">取消修改</el-button>
                </div>
            </form>
        </div>
    </el-dialog>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { xguserlist, xguserlisttwo } from '@/api/user.js'
import { ref, onMounted } from 'vue'
import { useRouter } from "vue-router";
const router = useRouter();
// 用户信息
const userObj = ref({})
const gerengxingxixiugai = ref(false)
const headerimgref = ref("")
//取消修改个人信息
const Cancelmodification = () => {
    headerimgref.value = JSON.parse(localStorage.getItem("user")).headerimg
    jiazaiover()
    gerengxingxixiugai.value = false
}
//预览图片
const getimgsrc = () => {
    const imgg = document.querySelector("input[name='headerimg']")
    let windowURL = window.URL || window.webkitURL;
    let imggg = imgg.files[0]
    headerimgref.value = windowURL.createObjectURL(imggg)
}
//修改用户信息
const btnlogin = async () => {
    let yesandno = confirm("确认修改个人信息吗？修改后需重新登录。")
    if (yesandno == true) {

        let _id = JSON.parse(localStorage.getItem("user"))._id
        const imgg = document.querySelector("input[name='headerimg']")
        if (imgg.files[0]) {
            let formDate = new FormData()
            formDate.append('_id', _id)
            formDate.append('nick', userObj.value.nick)
            formDate.append('gender', userObj.value.gender)
            formDate.append('telephone', userObj.value.telephone)
            formDate.append('mail', userObj.value.mail)
            formDate.append('address', userObj.value.address)
            let imggg = imgg.files[0]
            formDate.append('headerImg', imggg)
            let data = await xguserlist(formDate)
            const { resultCode } = data
            if (resultCode == 1) {
                gerengxingxixiugai.value = false
            }
        } else {
            let data = await xguserlisttwo(_id, userObj.value.nick, userObj.value.gender, userObj.value.telephone, userObj.value.mail, userObj.value.address)
            const { resultCode } = data
            if (resultCode == 1) {
                gerengxingxixiugai.value = false
            }
        }
        localStorage.removeItem('TOKEN');
        localStorage.removeItem('user');
        router.push({ path: '/' })
    } else {
        dialogFormVisible.value = false
        ElMessage({
            message: '您取消了修改',
            grouping: true,
            type: 'success',
        })
    }
}
// 获取地址栏参数并选择合适的routername 头像显示
const jiazaiover = () => {
    userObj.value = JSON.parse(localStorage.getItem("user"))
    headerimgref.value = JSON.parse(localStorage.getItem("user")).headerimg
}
onMounted(() => {
    jiazaiover()
})


</script>
<style lang="scss" scoped>
p {
    margin: 0;
}

.userxingxibox {
    background: #fff;
    width: 330px;
    display: flex;
    border-radius: 5px;
    padding: 10px;

    .imgbox {
        width: 80px;
        text-align: center;
    }

    img {
        border: 1px solid #666;
        width: 78px;
        height: 78px;
        border-radius: 50%;
    }

    .islistbox {
        margin-left: 10px;

        p {
            margin: 5px;
        }

        .ltext {
            font-size: 12px;
            margin-top: 4px;
            color: #999;
        }
    }
}

//弹框
.usercard {
    margin: 0 auto;
    width: 400px;
    border-radius: 20px;
    border: 1px solid #bbb;
    // height: 800px;
    text-align: center;

    .headerimgbox {
        margin-left: 35px;
        display: flex;
        justify-content: center;

        img {
            margin-top: 10px;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            border: 1px solid #bbb;
        }

        input {
            width: 75px;
            margin-top: 80px;
        }
    }

    .listbox {
        width: 100%;
        height: 50px;

        label {
            display: inline-block;
            margin-left: -20px;
            width: 100px;
            text-align: right;
            font-size: 18px;
        }

        .el-cascader {
            border: 0px;
        }

        input {
            border: 0px;
            border-bottom: 1px solid #bbb;
            width: 200px;
            text-align: center;
        }
    }

    .form_item {
        margin-bottom: 30px;
    }
}
</style>